<template>
	<view>
	
		<cu-custom :bgColor="theme" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">居民信息</block>
		</cu-custom>
		
		<view style="background-color: #FFFFFF;padding-bottom: 80rpx;">
			<template>
				<uni-list-item title="身份证号">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="身份证号" placeholder-style="color:#3694EF" @input="fpNumInput" v-model="userSfzInfo.sfzNo"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="姓名">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="姓名" placeholder-style="color:#3694EF" v-model="userSfzInfo.sfzName"/>
					<!-- 	<text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="民族">
					<view class="flex align-center" slot="right">
						<picker @change="changeMinzu" :value="userSfzInfo.sfzMinzu?userSfzInfo.sfzMinzu:backinfoMinzu" :range="minzuList" range-key="name">
							<if v-if="userSfzInfo.sfzMinzu == null || userSfzInfo.sfzMinzu == undefined">
								<text style="color:#959595">{{ minzuList[backinfoMinzu].name }}</text>
							</if>
							<if v-if="userSfzInfo.sfzMinzu != null && userSfzInfo.sfzMinzu != undefined">
								<text style="color:#959595">{{ userSfzInfo.sfzMinzu }}</text>
							</if>
							<text class="iconfont icon-jinrujiantou ml-2"></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="学历">
					<view class="flex align-center" slot="right">
						<picker @change="changeXueli" :value="backinfoXueli" :range="xueliList" range-key="name">
							<text style="color:#959595">{{ xueliList[backinfoXueli].name }}</text>
							<text class="iconfont icon-jinrujiantou ml-2"></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="个人身份">
					<view class="flex align-center" slot="right">
						<picker @change="changeShenFen" :value="backinfoShenFen" :range="shenFenList" range-key="name">
							<text style="color:#959595">{{ shenFenList[backinfoShenFen].name }}</text>
							<text class="iconfont icon-jinrujiantou ml-2"></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="就业状态">
					<view class="flex align-center" slot="right">
						<picker @change="changeJiuYeState" :value="backinfoJiuye" :range="jiuyeList" range-key="name">
							<text style="color:#959595">{{ jiuyeList[backinfoJiuye].name }}</text>
							<text class="iconfont icon-jinrujiantou ml-2"></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="联系电话">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入联系电话" placeholder-style="color:#3694EF" v-model="userSfzInfo.phonenum"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="户口性质">
					<view class="flex align-center" slot="right">
						<picker @change="changeHuKouXingZhi" :value="backinfoHuKouXingZhi" :range="huKouXingZhiList" range-key="name">
							<text style="color:#959595">{{ huKouXingZhiList[backinfoHuKouXingZhi].name }}</text>
							<text class="iconfont icon-jinrujiantou ml-2"></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="班级">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入班级" placeholder-style="color:#3694EF" v-model="userSfzInfo.classname"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="家庭住址">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入家庭住址" placeholder-style="color:#3694EF" v-model="userSfzInfo.zhuzhi"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="省/市">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入省/市" placeholder-style="color:#3694EF" v-model="userSfzInfo.sfzSheng"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="州地市">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入州地市" placeholder-style="color:#3694EF" v-model="userSfzInfo.sfzShi"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="区县">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入区县" placeholder-style="color:#3694EF" v-model="userSfzInfo.sfzXian"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item title="详细地址">
					<view class="flex align-center" slot="right">
						<input class="uni-input text-right" placeholder="请输入详细地址" placeholder-style="color:#3694EF" v-model="userSfzInfo.sfzAddress"/>
						<!-- <text class="iconfont icon-write ml-2"></text> -->
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				<uni-list-item>
					<view class="flex flex-column">
						<text>备注</text>
						<!-- <input class="uni-input" style="background-color: #f7fbff;padding-top: 10rpx;padding-left:10rpx;width: 100%:" placeholder="请输入" placeholder-style="color:#3694EF" v-model="userSfzInfo.remark"/> -->
						<!-- <text class="iconfont icon-write ml-2"></text> -->
						<textarea
							class="yijian-txt"
							v-model="userSfzInfo.remark" 
							placeholder="请输入" 
							placeholder-style="color:#3694EF;" 
							style="background-color: #f7fbff;padding-top: 10rpx;padding-left:5rpx;width: 100%;border-radius: 10rpx;"></textarea>
					</view>
				</uni-list-item>
				<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
				
				
				
				
				
				
				<view class="py-2 px-2">
					<!-- class="bg-main text-white" -->
					<button 
						class="text-white" 
						style="border-radius: 20rpx; border: @;background-color:#3694EF;width: 80%;" 
						type="primary"
						@click="submit">
					完成</button>
				</view>
				<!-- <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
				 @onConfirm="onConfirm"></mpvue-city-picker> -->
			 </template>
		</view>
	</view>
</template>
<script>	
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';
	
	import minzuData from '../../packageC/pages/news_detail/minzudata.js';
	import jiuyeData from '../user-userinfo/jiuyedata.js';
	import xueliData from './xuelidata.js';
	import shenFenData from './zhiyedata.js';
	import huKouXingZhiData from './hukouxingzhidata.js';
	const app = getApp();
	export default {
		components:{
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
							
				cityPickerValueDefault: [28,0,0], //区域默认选项
				themeColor: '#007AFF',
				backinfoHuKouXingZhi:10,
				backinfoXueli:8,
				backinfoShenFen:9,
				backinfoMinzu:0,
				backinfoZhiye:9,
				backinfoJiuye:5,
				minzuList:minzuData,
				shenFenList:shenFenData,
				jiuyeList:jiuyeData,
				xueliList:xueliData,
				huKouXingZhiList:huKouXingZhiData,
				birthday:"",
				userSfzInfo:{
					backinfoSex:2,
					sfzMinzu:"汉族",
					jiuyeState:"灵活就业",
					xueli:"初中",
					shenfen:"自由职业者",
					zhuzhi:"",
					sfzSex:2,
					hukouXingzhi:"本地居民户口"
				},
				userStudentInfo:{},
			}
		},
		created() {
			this.getSFZList();
		},
		//获取url带的值
		onLoad(option) {
			this.getSFZList(option.str);
		},
		methods: {
			fpNumInput(e) {
				const o = e.target;
				const inputRule = /^(0+)|[^\d]+/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.form.fpNum = o.value.replace(inputRule , '');
				})
			},
			//获取身份证识别信息
			getSFZList(str){
				if(str == 'sfzCaiJi'){
					this.userSfzInfo.sfzNo = app.globalData.sfzItem.sfzNo;
					this.userSfzInfo.sfzName = app.globalData.sfzItem.sfzName;
					this.userSfzInfo.sfzMinzu = app.globalData.sfzItem.sfzMinzu;
					this.userSfzInfo.zhuzhi = app.globalData.sfzItem.zhuzhi;
					this.userSfzInfo.sfzSheng = app.globalData.sfzItem.sfzSheng;
					this.userSfzInfo.sfzShi = app.globalData.sfzItem.sfzShi;
					this.userSfzInfo.sfzXian = app.globalData.sfzItem.sfzXian;
					this.userSfzInfo.sfzAddress = app.globalData.sfzItem.sfzAddress;	
				}
				
			},
			// 地址
			showCityPicker(){
				this.$refs.mpvueCityPicker.show();
			},
			// 三级联动的提交事件
			onConfirm(e){
				this.userSfzInfo.zhuzhi = e.label;
			},
			// 修改生日
			onDateChange(e){
				this.userSfzInfo.sfzBirthday = e.detail.value;
			},
			
			// 民族
			changeMinzu: function(e) {
				this.backinfoMinzu = e.detail.value;
				this.userSfzInfo.sfzMinzu = this.minzuList[this.backinfoMinzu].name;
			},
			// 就业状态
			changeJiuYeState: function(e) {
				this.backinfoJiuye = e.detail.value;
				this.userSfzInfo.jiuyeState = this.jiuyeList[this.backinfoJiuye].name;
			},
			// 学历
			changeXueli: function(e) {
				this.backinfoXueli = e.detail.value;
				this.userSfzInfo.xueli = this.xueliList[this.backinfoXueli].name;
			},
			// 个人身份
			changeShenFen: function(e) {
				this.backinfoShenFen = e.detail.value;
				this.userSfzInfo.shenfen = this.shenFenList[this.backinfoShenFen].name;
			},
			// 户口性质
			changeHuKouXingZhi: function(e) {
				this.backinfoHuKouXingZhi = e.detail.value;
				this.userSfzInfo.hukouXingzhi = this.huKouXingZhiList[this.backinfoHuKouXingZhi].name;
			},
			
			submit(){
				//显示加载
				uni.showToast({
					title:'正在采集',
					icon:"loading"
				});
				if(this.userSfzInfo.sfzNo == null || this.userSfzInfo.sfzNo == undefined){
					uni.showToast({
						icon: 'error',
						title: '请输入身份证号！'
					});
				}else if(!(/^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$/.test(this.userSfzInfo.sfzNo))){
					uni.showToast({
						icon: 'error',
						title: '身份证号格式错误！'
					});
				}else if(this.userSfzInfo.sfzName == null || this.userSfzInfo.sfzName == undefined){
					uni.showToast({
						icon: 'error',
						title: '姓名不能为空!'
					});
				}else if(!(/^[\u4e00-\u9fa5]{2,6}$/.test(this.userSfzInfo.sfzName))){
					uni.showToast({
						icon: 'error',
						title: '输入2~6位姓名!'
					});
				}else if(this.userSfzInfo.phonenum == null || this.userSfzInfo.phonenum == undefined){
					uni.showToast({
						icon: 'error',
						title: '请输入联系电话！'
					});
				}else if(!(/^(0|86|17951)?1[0-9]{10}$/.test(this.userSfzInfo.phonenum))){
					uni.showToast({
						icon: 'error',
						title: '手机号格式错误!'
					});
				}else if(this.userSfzInfo.sfzSheng == null || this.userSfzInfo.sfzSheng == undefined){
					uni.showToast({
						icon: 'error',
						title: '省/市不能为空！'
					});
				}else if(this.userSfzInfo.sfzShi == null || this.userSfzInfo.sfzShi == undefined){
					uni.showToast({
						icon: 'error',
						title: '州地市不能为空！'
					});
				}else if(this.userSfzInfo.sfzXian == null || this.userSfzInfo.sfzXian == undefined){
					uni.showToast({
						icon: 'error',
						title: '区县不能为空！'
					});
				}else{
					uni.request({
							/* url: 'http://192.168.1.13:8080/data/sfz/sfzDatainput', */
							url: app.globalData.serve_sfz_url+ 'sfzDatainput',
							method: 'POST',
							data: this.userSfzInfo,
							success: res => {
								if(res.data.code == 200){
									uni.showToast({
										icon: 'none',
										title: '录入成功！'
									});
									setTimeout(function(){
										uni.navigateBack({
											delta: 1
										});
									}, 2000);
								}else{
									uni.showToast({
										icon: 'none',
										title: '录入失败！'
									});
								}
							},
							fail: () => {
								uni.showToast({
									icon: 'none',
									title: '网络错误'
								});
							},
					});
				}
				
			}
		}
	}
</script>
<style scoped>
	.split_line{
		width: 100%;
		border-bottom: 2rpx solid #e2e2e2;
		margin: 10rpx 0rpx 20rpx 0rpx;
	}
</style>